<template>
	<view class="mian" v-if="detailData">
		<view v-if="detailData.image" class="img_goods">
			<image class="img" mode="aspectFit" lazy-load :src="detailData.image"></image>
		</view>
		<view v-else class="void_goods">
			<image class="img" src="/static/goods.svg"></image>
			<view class="tip">暂无图片</view>
		</view>
		<view class="goods_main">
			<view class="brand">
				<span class="tag" v-if="!detailData.overInsured">
					在保
				</span>
				<span class="tag tag_p" v-else>
					过保
				</span>
				<span class="day_color" v-if="!detailData.overInsured">{{detailData.warrantyDay}}天</span>
				<p class="tip">{{'【'+detailData.goodsBrand+'】'}}</p>
				<p class="tip">{{detailData.goodsType}}</p>
			</view>
			<view class="goods_name">
				{{detailData.goodsName}}
			</view>
			<view class="goods_ms"><span class="mo">型号：{{detailData.goodsModel}}</span>
				<span>规格：{{detailData.goodsSpecName}}</span>
			</view>
		</view>
		<view class="card">
			<view class="code_num">
				<span class="c9">一物一码：</span>{{detailData.code}}
			</view>
			<view class="code_num">
				<p><span class="c9">登记时间：</span>{{detailData.registerTime}}</p>
			</view>
			<view class="time">
				<p><span class="c9">质保到期：</span>{{detailData.warrantyEndTime}}</p>
			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
	import apiGoods from '@/util/api/goods.js'
	const detailData = ref(null)
	const goodsId = ref('')
	// 通过onLoad接收数据
	onLoad((e) => {
		goodsId.value = e.id
		getDetail(e.id)
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 刷新
	onPullDownRefresh(async () => {
		await Promise.all([getDetail(goodsId.value)]).then(() => {
			uni.stopPullDownRefresh()
		})
	})
	// 获取商品详情
	const getDetail = async (id) => {
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})
		await apiGoods.getGoodsDetail(id).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				detailData.value = res.data.row
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.mian {
		background-color: #f6f7fa;
		height: 100vh;

		.img_goods {
			height: 460rpx;
			background-color: #f6f7fa;

			.img {
				width: 100%;
			}
		}

		.void_goods {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			height: 460rpx;
			background-color: #f6f7fa;

			.img {
				width: 60%;
				height: 200rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.goods_main {
			margin: 0 0 24rpx;
			background-color: #fff;
			padding: 24rpx;

			.brand {
				color: #000;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 18rpx;
				width: 100%;
				word-wrap: break-word;
				word-break: break-all;

				.tag {
					background-color: #007cff;
					color: #fff;
					font-size: 24rpx;
					padding: 4rpx;
					border-radius: 4rpx;
					margin-right: 6rpx;

					&.tag_p {
						background-color: #ccc;
						color: #eee;
					}
				}

				.day_color {
					background-color: #007cff;
					color: #fff;
					font-size: 24rpx;
					padding: 4rpx;
					border-radius: 4rpx;
				}

				.tip {

					max-width: 300rpx;
					color: #007cff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.goods_name {
				font-weight: bold;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin-bottom: 14rpx;
			}

			.goods_ms {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				flex-wrap: wrap;

				.mo {
					margin-right: 60rpx;
				}
			}
		}

		.card {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;
			font-size: 24rpx;

			.code_num {
				margin-bottom: 14rpx;
			}

			.c9 {
				color: #999;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_k {
					display: flex;
					align-items: center;
					line-height: 24rpx;
					height: 24rpx;

					.bule {
						color: #007cff;
						margin-right: 14rpx;
						line-height: 24rpx;
						height: 24rpx;
					}
				}

			}

		}
	}
</style>